<template>
  <div class="list">
    <div class="van-nav-bar__content">
      <div class="van-nav-bar__left" @click="go">
        <van-icon name="arrow-left" />
        <span>返回</span>
      </div>
      <div class="van-nav-text">
        <span> 新品首发 </span>
      </div>
    </div>
    <div class="img-banner">
      <img
        src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-list-banner-b691c95d.png"
        alt=""
      />
    </div>
    <div class="tab" @click="tabEvents">
      <div class="tabbar">
        <div>综合</div>
        <div class="tabbarprice">
          <div :class="current != 'default' ? 'active' : ''">价格</div>
          <div class="iconBox">
            <van-icon
              :color="current == 'up' ? '#deb12a' : ''"
              name="arrow-up"
            />
            <van-icon
              :color="current == 'down' ? '#deb12a' : ''"
              name="arrow-down"
            />
          </div>
        </div>
        <div>分类</div>
      </div>
    </div>
    <div>
      <ul>
        <li v-for="item in list" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <h2>{{ item.name }}</h2>
          <p>￥：{{ item.retail_price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { goodsList } from "@/views/api/home/list";
export default {
  data() {
    return {
      list: [],
      id: "",
      current: "default", // default up down
    };
  },
  created() {
    // 路由传值 判断页面参数
    var id = this.$route.query.id;
    this.id = this.$route.query.id;
    goodsList({
      isHot: id == 2 ? 1 : "",
      isNew: id == 1 ? 1 : "",
      order: "",
    }).then((res) => {
      console.log(res);
      this.list = res.data;
    });
  },
  mouted() {},
  methods: {
    tabEvents() {
      if (this.current == "default") {
        this.current = "up";
      } else if (this.current == "up") {
        this.current = "down";
      } else {
        this.current = "up";
      }
      goodsList({
        isHot: this.id == 2 ? 1 : "",
        isNew: this.id == 1 ? 1 : " ",
        order: this.current == "up" ? "asc" : "desc",
      }).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    go(){
      window.history.go(-1);
    }
  },
};
</script>
<style scoped lang='scss'>
.list {
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49%;
      img {
        width: 100%;
      }
    }
  }
}
.van-nav-bar__conten {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--van-nav-bar-height);
  display: block;
  box-sizing: border-box;
  /* margin: 0; */
  position: relative;
  font-weight: 400;
}

.van-nav-bar__left {
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  padding: 0 var(--van-padding-md);
  font-size: var(--van-font-size-md);
}

.van-nav-bar__left span {
  font-family: PingFangSC-Regular;
  font-size: 0.416rem;
  color: #666;
  letter-spacing: 0;
  font-weight: 400;
}
.van-nav-text {
  font-family: PingFangSC-Medium;
  font-size: 0.48rem;
  color: #333;
  letter-spacing: 0;
  font-weight: 500;
}

.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 1.33333rem;
  background-color: #fff;
}
.tabbarprice {
  display: flex;
  align-items: center;
  height: 100%;
}
.iconBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img-banner img {
  width: 100%;
  height: 4.34667rem;
}
</style>

